<template>
  <div id="app">

    <frame-layout
      :sideNavWidth="sideNavWidth"
      :headerNavHeight="headerNavHeight"
      :footerHeight="footerHeight"
      :tagsHeight="tagsHeight"
      :logoConHeight="logoConHeight"
    >
      <img slot="logo" src="src/assets/lbrjms.jpg" style="margin-top:15px;margin-bottom:5px;width:60px;height:60px;border-radius:50%;"/>
      <side-nav
        :menus="menus"
        slot="sideNav"></side-nav>
      <!--<header-nav slot="headerNav"></header-nav>-->

      <open-tags slot="headerTags"></open-tags>

      <div slot="singlePage" style="width: 100%;height: 100%;overflow:auto; ">
        <router-view></router-view>
      </div>
    </frame-layout>
  </div>
</template>

<script>
  import FrameLayout from '@/components/common/layout/Layout.vue'
  import SideNav from '@/components/common/layout/MSideNav.vue'
  import OpenTags from '@/components/common/layout/OpenTags.vue'
  import util from '@/util/Util'

  export default {
    name: 'app',
    components: {
      FrameLayout,
      SideNav,
      /*HeaderNav,*/
      OpenTags
    },
    computed: {
      sideNavWidth () {
        let sideNavWidth = this.$store.state.frameLayoutInfo.sideNavWidth;
        if(util.isPositiveInteger(sideNavWidth)){
          return sideNavWidth
        }else{
          return 200;
        }
      },
      headerNavHeight () {
        let headerNavHeight = this.$store.state.frameLayoutInfo.headerNavHeight;
        if(util.isPositiveInteger(headerNavHeight)){
          return headerNavHeight
        }else{
          return 80;
        }
      } ,
      footerHeight () {
        let footerHeight = this.$store.state.frameLayoutInfo.footerHeight;
        if(util.isPositiveInteger(footerHeight)){
          return footerHeight
        }else{
          return 20;
        }
      } ,
      tagsHeight () {
        let tagsHeight = this.$store.state.frameLayoutInfo.tagsHeight;
        if(util.isPositiveInteger(tagsHeight)){
          return tagsHeight
        }else{
          return 30;
        }
      } ,
      logoConHeight () {
        let logoConHeight = this.$store.state.frameLayoutInfo.logoConHeight;
        if(util.isPositiveInteger(logoConHeight)){
          return logoConHeight
        }else{
          return 100;
        }
      },
      menus () {
        return this.$store.state.user.menus;
      }
    },

    /**
     * 创建时初始化菜单
     */
    mounted () {
        var thisVue = this;
        var loaderMenus = function () {
            if(thisVue.$store.state.user.menus == false){
              thisVue.axios.get('api/getMenus').then(function (response) {
                  thisVue.$store.commit('setMenus', response.data.reqResult);
                } , function (response){
                  console.log("获取信息失败");
                  console.log(response);
                });
            }
        }
        loaderMenus();

    }
  }
</script>

<style>
  #app {
    width: 100%;
    height: 100%;
  }
</style>
